<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        DOM节点:
            DOM树里每一个内容都称之为节点
        节点类型:
            元素节点:
                所有的标签 比如body div
                html是根节点
            属性节点:
                所有的属性 比如href
            文本节点:
                所有的文本
            其他
        节点关系:针对的找亲戚返回的都是对象
            父节点 
                parentNode 属性
                返回最近一级的父节点 找不到返回为null
                子元素.parentNode
            子节点
                childNodes 获得所有子节点,包括文本节点(空格,换行),注释节点等
                children 属性(重点)
                    仅获得所有元素节点
                    返回的还是一个伪数组
                    父元素.children
            兄弟节点
                nextElementSibling 属性 下一个兄弟节点
                previousElementSibling 属性 上一个兄弟节点
        
        新增节点:
            1.创建新的节点
            2.把创建的新的节点放入到指定的元素内部

            父元素.appendChild(要插入的元素)  //插入到这个父元素的最后
            父元素.insertBefore(要插入的元素,在哪个元素前面) //插入到某个子元素的前面

        克隆节点和删除节点
            克隆节点:复制一个原有的节点  把复制的节点放入到指定的元素内部
                    元素.cloneNode(布尔值)   布尔值为true :则克隆时会包含后代节点一起克隆
            删除节点:
                    在javaScript原生DOM操作中,要删除元素必须通过父元素删除
                    父元素.removeChild(要删除的元素)
     -->
     <ul>
        <li>我是老大</li>
     </ul>
</body>
<script>
    //1.创建节点
        // const div=document.createElement('div');
        // document.body.appendChild(div)
        
        const uu = document.querySelector('ul');
        const li = document.createElement('li');
        li.innerHTML='我是li';
        // uu.appendChild(li);
        uu.insertBefore(li,uu.children[0])
</script>
</html>